import React, { useState } from 'react'
import { View, Text, Image, Swiper, SwiperItem, Button } from '@tarojs/components'

import Taro from '@tarojs/taro';
import { Mask } from '@/components/UiComponents';
import { backgroundObj } from '@/utils/utils'
import Container from '../Container'
import './index.scss'
const ContactCustomer = (props) => {
    const { data = {} } = props
    const [visible, setVisible] = useState(false)
    const { top, bottom, cover, importText, title, btnText, modelTitle1, modelTitle2, code } = data
    return <Container {...props}>
        <View className='wxPage_contactCustomer'>
            <View className='component-main-container'>
                <View className='content-container'>
                    <View className='left-wrapper'>
                        <View style={{ ...backgroundObj(cover) }} className='img-container'></View>
                        <View className='public-info'>
                            <View className='title'>{title ? title : '公众号名称'}</View>
                            <View className='summary'>{modelTitle2}</View>
                        </View>
                    </View>
                    <View onClick={() => { setVisible(true) }} className='right-btn'>{btnText}</View>
                </View>

            </View>
            <Mask
                closeBtn={false}
                show={visible}
                onClose={() => setVisible(false)}

            >
                <View style={{ width: 300, display: 'flex', flexDirection: 'column', alignItems: 'center', background: '#ffffff', minHeight: 300 }}>
                    <View style={{ color: '#333333', fontSize: 16, paddingTop: 12 }} className=''>{modelTitle1}</View>
                    <View style={{ color: '#333333', fontSize: 14, marginTop: 12 }} className=''>{modelTitle2}</View>
                    <View style={{ width: 180, height: 180 }}>
                        <Image showMenuByLongpress={true} onClick={() => {
                            Taro.previewImage({
                                urls: [code] // 需要预览的图片http链接列表
                            })
                        }} src={code} style={{ width: '100%', height: "100%", }} mode="aspectFill" />
                    </View>

                </View>
            </Mask>
        </View>
    </Container>
}
export default ContactCustomer